<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="250px" isClick
    @chartClick="chartClick" />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
export default {
  data() {
    return {
      showChat: false,
      tableData: [
        { waybillname: '服装市场', waybillNum: '3.6h', waybillCompleteNum: '18%' },
        { waybillname: '干货市场', waybillNum: '3.5h', waybillCompleteNum: '16%' },
        { waybillname: '五金市场', waybillNum: '3.4h', waybillCompleteNum: '15%' },
        { waybillname: '板材市场', waybillNum: '3.2h', waybillCompleteNum: '14%' }
      ],
      chooseIndex: '10',
      options: {},
      countUserNumData: {
        axisData: ['兰华物流园', '大集物流园', '兰田物流港', '华苑物流城', '华丰物流城'],
        seriesData: [781, 637, 538, 489, 395],
      },
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    chartClick(params) {
      this.$emit('chartClick', params);
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      // this.init(this.countUserNumData);
      if (this.typePosition == 'centerLong') {
        this.init(this.countUserNumDataLong)
      } else {
        this.init(this.countUserNumData);
      }
    },
    //轮询
    init(currentData) {
      let axisData = currentData.axisData;
      let seriesData = [[...currentData.seriesData]];
      const options = {
        grid: {
          top: '15%',
          left: '4%',
          right: '4%',
          bottom: '12%',
          containLabel: true,
        },
        legend: {
          show: true,
          top: '0%',
          right: '4%',
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 6,
          itemGap: 10,
          textStyle: legend.textStyle,
          data: ['条'],
        },
        xAxis: {
          type: 'category', // 将 x 轴设置为数值轴
          // max: 8000,
          // min: 100,//
          // interval: 2000,
          data: axisData,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: {
          type: 'value',
          // data: axisData,
          // boundaryGap: false,
          axisLabel: yAxis.axisLabel,
          axisLine: {
            show: false,
            // interval: 1,
            lineStyle: {
              color: 'rgba(0,0,0,0.5)',
            },
          },
          splitLine: {
            show: true,
            // interval: 1,
            lineStyle: {
              color: ['rgba(176, 215, 255, 0.2)'],
              width: 1,
              type: 'dashed',
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [],
      };
      const series = [
        {
          name: '条',
          type: 'bar',
          barWidth: 30,
          // 动画配置s
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          backgroundStyle: {
            color: 'rgba(21,136,209,0.2)',
          },
          smooth: false,
          showSymbol: true,
          data: seriesData[0],
          showBackground: false,
          // itemStyle: {
          //   normal: {
          //     color: 'rgba(0,219,254, .7)',
          //   },
          // },
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: '#43E3E3',
                  },
                  {
                    offset: 0,
                    color: 'rgba(66, 226, 227, 0)',
                  },
                ],
                globalCoord: false,
              },
            },
          },
          z: 0,
        },
      ];
      options.series = series;
      this.options = options;
    },
    showChatFun(index) {
      console.log('index==' + index)
      this.showChat = true
      this.chooseIndex = index
    }
  },
};
</script>
<style lang="scss" scoped>
.list {
  margin: 5px 20px 15px 20px;

  .list-header {
    border: 1px solid #153c81;
    display: flex;
    justify-content: center;
    height: 32px;
    line-height: 32px;
    color: rgba($color: #ffffff, $alpha: 0.8);

    .first {
      width: 55%;
      text-align: center;
      margin-left: -10%;
    }
  }

  .list-item {
    border: 1px solid #153c81;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    height: 32px;
    line-height: 32px;
    color: rgba($color: #ffffff, $alpha: 0.9);
    font-weight: bold;

    .first {
      // position: relative;
      width: 55%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      &::before {
        position: absolute;
        left: -52px;
        top: 2px;
        // content: url('../../assets/img/launch/inout/icon.png');
      }

      .no {
        // position: absolute;
        // left: -48px;
        // top: 0px;
        position: relative;
        left: 5px;
        top: 0px;
        width: 25px;
        height: 24px;
        background: url('../../../assets/img/launch/home/icon.png') no-repeat 1% 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .spanText {
        width: calc(100% - 25px);
        text-align: center;
        display: flex;
        justify-content: center;
        text-align: center;
      }
    }

    .last {
      width: 45%;
      text-align: center;
    }
  }
}
</style>
